<template>
  <div class="appointment-detail">
      <!-- 提示信息 -->
      <van-notice-bar
        text="以下是预约详情,确认完购买课时数量并支付后即可预约成功，快加入女王健身吧..."
        left-icon="../static/voice.png"
        />
      <!-- 订单详细 -->
      <div class="">
          <van-cell-group class="appointment-detail-form">
            <van-cell class="appointment-detail-field" icon="records" :value="course.name" title="课程:"/>
            <van-cell class="appointment-detail-field" icon="cart" :value="course.period" title="剩余课时:"/>
            <van-cell class="appointment-detail-field" icon="edit" :value="use" title="预约课时:"/>
            <van-cell class="appointment-detail-field" icon="contact" is-link arrow-direction="down" :value="coachChoose" title="教练:" @click="show = true"/>
             <van-cell class="appointment-detail-field" icon="location" :value="roomChoose" title="预约课时:"/>
            <van-cell class="appointment-detail-field" v-if="hasTime" icon="clock" :value="dateText" title="日期:"/>
            <van-cell class="appointment-detail-field" v-if="!hasTime" icon="clock" is-link arrow-direction="down" :value="dateChoose" title="日期:" @click="showDate = true"/>
            <van-cell class="appointment-detail-field" v-if="hasTime" icon="underway" :value="time" title="时间:"/>
            <van-cell class="appointment-detail-field" v-if="!hasTime" icon="underway" is-link arrow-direction="down" :value="timeChoose" title="时间:" @click="showTime = true"/>
          </van-cell-group>
      </div>
      <!-- 教室选择框 -->
      <van-dialog
        v-model="show"
        show-cancel-button
        :before-close="beforeDateClose">
        <!-- <van-radio-group v-model="roomId"> -->
          <!-- <van-radio v-for="(item, index) in room" :key="index" :name="item.id">{{item.name}}</van-radio> -->
          <van-picker :columns="coaches" @change="onCoachChange"/>
        <!-- </van-radio-group> -->
      </van-dialog>
      <!-- 日期选择框 -->
      <van-popup position="bottom" v-model="showDate">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate" v-on:confirm="onChooseDate" v-on:cancel="showDate = false"
        />
      </van-popup>
      <!-- 时间段选择框 -->
      <van-dialog
        v-model="showTime"
        show-cancel-button
        :before-close="beforeTimeClose">
          <van-picker :columns="times" @change="onTimeChange" />
      </van-dialog>
      <!-- 预约支付 -->
      <div class="appointment-detail-pay">
        <van-row>
            <van-col class="van-col-12">
                <van-button @click="appint" type="danger" :disabled="course.period < 1" bottom-action>
                    立即预约
                </van-button>
            </van-col>
            <van-col class="van-col-12">
                <van-button type="primary" @click="toOrder" bottom-action>
                    去购买
                </van-button>
            </van-col>
        </van-row>
     </div>
     <back :scroll="false"></back>
  </div>
</template>

<script>
import back from '../../components/base/back.vue'

export default {
  name: 'appointment-detail',
  comments: 'appointment-detail',
  components: {
    back
  },
  data () {
    return {
      course: {},
      coachList: [],
      coaches: [],
      timeList: [],
      times: [],
      roomChoose: '',
      coachChoose:'',
      dateChoose: '',
      timeChoose: '',
      roomId: null,
      time_id: this.$router.history.current.query.time_id,
      use: 1,
      show: false,
      showDate: false,
      showTime: false,
      hasTime: this.$router.history.current.query.time_id,
      date: new Date(),
      dateText: new Date().toLocaleDateString(),
      time: this.$router.history.current.query.name,
      loading: false,
      showList: false,
      minDate: new Date(),
      currentDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDay() + 1)
    }
  },
  created () {
    window.document.title = '私教预约'
    this.getCourse()
    // this.getRoom()
    this.getCoachs();
    if (!this.$router.history.current.query.time_id) {
      this.getTimes()
    }
  },
  methods: {
    toOrder () {
      this.$router.push({
        name: 'pay_course_person',
        query: {
          course_id: this.course.id
        }
      })
    },
    onRoomChange (picker, value, index) {
      // this.roomChoose = value
      // for (var i = 0; i < this.gymsList.length; i++) {
      //   if (this.gymsList[i].name === value) {
      //     this.roomId = this.gymsList[i].id
      //     break
      //   } else {
      //     continue
      //   }
      // }
    },
    onCoachChange (picker, value, index) {
      this.coachChoose = value
      for (var i = 0; i < this.coachList.length; i++) {
        if (this.coachList[i].name === value) {
          this.coach_id = this.coachList[i].id
          this.roomId = this.coachList[i].gym.id;
          this.roomChoose = this.coachList[i].gym.name;
          break
        } else {
          continue
        }
      }
    },
    onTimeChange (picker, value, index) {
      this.timeChoose = value
      for (var i = 0; i < this.timeList.length; i++) {
        if (this.timeList[i].name === value) {
          this.time_id = this.timeList[i].id
          break
        } else {
          continue
        }
      }
    },
    onChooseDate (value) {
      this.date = value
      this.dateChoose = new Date(value.getFullYear(), value.getMonth(), value.getDate()).toLocaleDateString()
      this.getTimes()
      this.showDate = false
    },
    // 获取课程信息
    getCourse () {
      var that = this
      var course_id = this.$router.history.current.query.course_id
      var user_id = JSON.parse(localStorage.getItem('user')).id
      this.$axios.get('/courses/' + course_id, {
        params: {
          user_id: user_id
        }
      }).then(response => {
        that.course = response.data
      })
    },
    getCoachs() {
      var that = this
      this.$axios.get('/coaches?status=1').then(response => {
        this.coachList = response.data
        for (var i = 0; i < response.data.length; i++) {
          console.log(response.data)
          that.coaches.push(response.data[i].name)
        }
        if (response.data.length > 0) {
          that.coachChoose = response.data[0].name
          that.coach_id = response.data[0].id
          this.roomId = this.coachList[0].gym.id;
          this.roomChoose = this.coachList[0].gym.name;
        }
      })
    },
    // // 获取可用教室
    // getRoom () {
    //   var that = this
    //   this.$axios.get('/gyms?type=person').then(response => {
    //     that.gymsList = response.data
    //     for (var i = 0; i < response.data.length; i++) {
    //       console.log(response.data)
    //       that.gyms.push(response.data[i].name)
    //     }
    //     if (response.data.length > 0) {
    //       that.roomChoose = response.data[0].name
    //       that.roomId = response.data[0].id
    //     }
    //   })
    // },
    // 获取可用时间段
    getTimes () {
      var that = this
      var user_id = JSON.parse(localStorage.getItem('user')).id
      var course_id = this.$router.history.current.query.course_id
      this.$axios.get('users/' + user_id + '/courses/' + course_id + '/sparetime', {
        params: {
          date: that.date.getTime() / 1000,
          coach_id: this.coach_id
        }
      }).then(response => {
        that.timeList = response.data
        that.times = []
        for (var i = 0; i < response.data.length; i++) {
          that.times.push(response.data[i].name)
        }
        if (response.data.length > 0) {
          that.timeChoose = response.data[0].name
          that.time_id = response.data[0].id
        }
      })
    },
    beforeDateClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 100)
      } else {
        done()
      }
    },
    beforeTimeClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 100)
      } else {
        done()
      }
    },
    // 预约
    appint: function (e) {
      if (!this.roomId) {
        this.$toast('请先选择教室！')
        return
      }
      if (!this.date || (this.date <= 0)) {
        this.$toast('请先选择日期！')
        return
      }
      if (!this.time_id || (this.time_id <= 0)) {
        this.$toast('未选择时间！')
        return
      }
      var that = this
      var user_id = JSON.parse(localStorage.user).id
      var course_id = this.$router.history.current.query.course_id
      debugger
      this.$axios.post('/users/' + user_id + '/courses/' + course_id + '/appointments', {
        time_id: that.time_id,
        date: that.date.getTime()/1000,
        classroom_id: that.roomId
      }).then(response => {
        this.$toast('预约成功！')
        if (response.data.id) {
          this.$router.push({
            name: 'appointment'
          })
        }
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.appointment-detail{
    width: 100%;
    height: 100%;
    margin-bottom: 50px;
}
.appointment-detail-form{
    margin: 5px;
}
.appointment-detail-form>div:first-child{
  border-radius: 4px 4px 0px 0px;
}
.appointment-detail-form>div:last-child{
  border-radius: 0px 0px 4px 4px;
}
.appointment-detail-field{
    background-color: #333;
    color: #f8f8f8;
    border-bottom: 1px solid #666;
    text-align: left;
}
.appointment-detail-field:last-child{
    border-bottom: none;
}
.appointment-detail-discount{
    margin-top: 10px;
}
.discount-list{
    height: 80%;
}
.appointment-detail-pay{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}
</style>
